<template>
  <div class="home" :style="{height:height+'px'}">
    <!-- 定位 -->
    <div class="guess border bottom_margin">
      <div id="city_title">当前定位城市:
        <span class="prompt">定位不准时,请在城市列表中选择</span>
      </div>
      <van-cell is-link>
        <template #title>
          <span id="guess_city" @click="locatecity_guess()">
            {{guesscities.name}}
          </span>
        </template>
      </van-cell>
    </div>
    <!-- 热门 -->
    <div class="hot border bottom_margin">
      <div id="city_title">热门城市</div>
      <van-grid class="hot_grid">
        <van-grid-item v-for="(item, index) in hotcities" :key="index" :text="item.name"
          @click="locatecity_hot(item)" />
      </van-grid>
    </div>
    <!-- 全部 -->
    <div class="group border bottom_margin">
      <div class="border bottom_margin" v-for="(item1, index1) in letters" :key="index1">
        <div id="city_title">{{item1}}</div>
        <van-grid>
          <van-grid-item v-for="(item2, index2) in groupcities[item1]" :key="index2" :text="item2.name"
            @click="locatecity_all(item2)" />
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'home',
    data: function () {
      return {
        height: this.$height,
        guesscities: [],
        hotcities: [],
        groupcities: [],
        groupcity: [],
        letters: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
      }
    },
    created() {
      //改变title
      this.$store.commit("changeTitle", "定位");
      this.$store.commit("changeShowLogin", true);
      // 开始网络请求,完成数据请求任务
      //最热
      const request1 = this.axios.get(this.$url + "/v1/cities?type=hot")
      // 全部
      const request2 = this.axios.get(this.$url + "/v1/cities?type=group")
      // 定位
      const request3 = this.axios.get("https://elm.cangdu.org/v1/cities?type=guess")
      this.axios.all([request1, request2, request3]).then(this.axios.spread((res1, res2, res3) => {
        //获取 最热地点 , 定位城市 和 全部地点
        this.hotcities = res1.data;
        // console.log(this.hotcities);
        this.groupcities = res2.data;
        // console.log(this.groupcities);
        this.guesscities = res3.data;
        // console.log(this.guesscities);
      })).catch(err => console.log(err));
    },
    methods: {
      locatecity_guess() {
        console.log(this.guesscities.id);
        this.$router.push({ name: "city", params: { id: this.guesscities.id } });
      },
      locatecity_hot(city_info) {
        console.log(city_info.id);
        this.$router.push({ name: "city", params: { id: city_info.id } });
      },
      locatecity_all(city_info) {
        console.log(city_info);
        this.$router.push({ name: "city", params: { id: city_info.id } });
      },
    },
  }
</script>
<style lang="less" scoped>
  .home {
    background-color: rgb(245, 245, 245);
  }

  #city_title {
    height: 20px;
    /* no */
    background-color: white;
    font-size: 10px;
    /* no */
    text-align: left;
    padding: 20px 20px;
    border-bottom: 1px solid rgb(228, 228, 228);
    /* no */

  }

  .prompt {
    float: right;
    color: rgb(159, 159, 159);
    font-weight: bold;
  }

  .bottom_margin {
    margin-bottom: 10px;
    /* no */
  }

  .border {
    border-top: 2px solid rgb(228, 228, 228);
    /* no */
    border-bottom: 3px solid rgb(228, 228, 228);
    /* no */
  }

  .guess {
    width: 100%;
    /* height: 10px; */
    display: inline-block;
  }

  .van-cell {
    height: 30px;
    /* no */
    padding: 10px;
    text-align: left;
    padding: 20px 20px;
  }

  #guess_city {
    background-color: white;
    color: rgb(49, 144, 232);
    font-size: 35px;
  }

  .hot {
    width: 100%;
    display: inline-block;
  }

  .van-grid-item {
    height: 100px;
  }

  /deep/.van-grid-item__text {
    font-size: 14px;
    /* no */
    /* color: rgb(49, 144, 232); */
  }

  .hot_grid /deep/.van-grid-item__text {
    color: rgb(49, 144, 232);
  }
</style>